import {useEffect,useState} from "react";
import { Route, Switch, BrowserRouter } from "react-router-dom";

import Movie from '../component/Movie'
import Cinema from '../component/Cinema'
import My from '../component/My'
import Footer from '../component/common/Footer'
import Details from '../component/Movie/Details'
import Detail from '../component/Cinema/Details'

import store from "../store";

 const Index = () => {
  const [footer,setFooter] = useState(store.getState().footer)
  useEffect(() => {
    const sub = store.subscribe(() => {
      setFooter(store.getState().footer)
    })
    return() => {sub()}
    },[])

    return (
      <BrowserRouter>
        <Switch>
          <Route component={Movie} path="/" exact></Route>
          <Route component={Details} path="/details" exact></Route>
          <Route component={Cinema} path="/cinema" exact></Route>
          <Route component={Detail} path="/cinema/details" exact></Route>
          <Route component={My} path="/my" exact></Route>
        </Switch>
        {footer ? <Footer /> : <></>}
      </BrowserRouter>
    )
}

export default Index